<template>
  <BottomDrawer
    :visible="addVisible"
    :title="'重命名'"
    :width="516"
    @close="addVisible = false"
  >
    <div>
      <el-row>
        <el-col :span="22" :offset="1">
          <PageForm
            ref="pageForm"
            :list="list"
            :form-data="formData"
            :rules="rules"
          >
          </PageForm>
        </el-col>
      </el-row>
    </div>

    <template #footer>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
      <el-button @click="addVisible = false">取 消</el-button>
    </template>
  </BottomDrawer>
</template>

<script setup lang="ts">
import type { FormRules } from 'element-plus';
import { editTemplateGroup } from '@/api/formwork/index';

const rules = reactive<FormRules<any>>({
  groupName: [{ required: true, message: '请输入名称', trigger: 'change' }],
});

const emits = defineEmits(['refresh']);
const pageForm = ref();

defineExpose<{
  open1: (data: any) => void;
}>({
  open1: (data: any) => {
    addVisible.value = true;
    formData.value = data;
  },
});

const addVisible = ref(false);

const formData = ref<any>({
  groupName: '',
  templateCategory: '',
  templateType: '',
});

const list: any = computed(() => [
  {
    list: [
      { span: 24, label: '目录名称', prop: 'groupName', component: 'input' },
    ],
  },
]);

const addDepApi = async () => {
  editTemplateGroup(formData.value)
    .then((res) => {
      if (res.code !== '200') {
        // ElMessage({ type: 'error', message: res?.msg || '编辑失败' , duration: 2000 });
        return;
      }
      ElMessage({ type: 'success', message: '编辑成功', duration: 2000 });
      emits('refresh');
      addVisible.value = false;
    })
    .catch((error) => {
      //console.error('编辑失败:', error);
    });
};

const handleSubmit = async () => {
  const ruleFormRef = pageForm.value?.ruleFormRef;
  await ruleFormRef.validate((valid: any, fields: any) => {
    if (valid) {
      addDepApi();
    } else {
      //console.log('error submit!', fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.tree-box {
  border: 2px solid #e1e1e1;
  height: 300px;
  width: 451px;
  margin-top: 10px;
  overflow-y: auto;
}
</style>
